<template>
	<div :class="classes.barrageBox">
		<div v-for="v in barrageList" :key="v.id" :class="classes.barrageItem" :style="{ top: v.top, animationDuration: animationDuring }">
			{{ v.text }}
		</div>
	</div>
</template>

<script setup lang="ts">
import { memoryManage } from "@/utils/index"
import classes from "./bar.module.less"

interface Props {
	list: any[]
}
const props = defineProps<Props>()
const barrageList = ref<any[]>([])
const animationDuring = (window.innerWidth / 1200) * 21 + "s"
watchEffect(() => {
	if (props.list.length) {
		if (memoryManage.get("timer")) {
			clearInterval(memoryManage.get("timer"))
		}
		memoryManage.set(
			"timer",
			setInterval(() => {
				if (memoryManage.get("idx") > props.list.length) {
					clearInterval(memoryManage.get("timer"))
				}
				memoryManage.set("idx", (memoryManage.get("idx") || 0) + 1)
				barrageList.value = props.list.slice(0, memoryManage.get("idx"))
			}, 3000)
		)
	}
})
</script>

<style scoped></style>

